<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>五子棋-游戏</title>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
	<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
		.gobang{
			margin:10px auto;
			width:642px;
			height: 642px;
			/*border:1px solid;*/
			background: url(picture/bak.jpg);
			overflow: hidden;
		}
		.text{
			margin:0 auto;
			width:100px;
			height:40px;
			text-align: center;
			color:#f00;
			border:1px solid red;
			line-height: 40px;
			display: block;
		}
		#can{
			margin:0px auto;
			border:1px solid green;
			display: block;
		}
	</style>
</head>
<body>
<body>
<canvas class="text">PK</canvas>
<div class="gobang">
	
	<canvas id="can" width="640" height="640">
		您的浏览器不支持canvas
	</canvas>
</div>
<script>
   var blackcolor=${sessionScope.colororder==1}?true:false;
	var text = document.getElementsByClassName('text');	
	//定义二维数组作为棋盘
	var maps = new Array(16);
	var len = maps.length;
	// alert(len)
	for(var i=0;i<len;i++){
		maps[i] = new Array();
		for(var j = 0;j<len;j++){
			maps[i][j] = 0;
			// console.log(maps[i][j]);
		}
	}

	//初始化棋子
	var black = new Image();
	var white = new Image();
	var clientWidth = document.documentElement.clientWidth;
	black.src = "picture/black.png";
	white.src = "picture/white.png";
	//棋盘初始化
	var can = document.getElementById('can');
	var ctx = can.getContext("2d");  //获取该canvas的2D绘图环境对象
	ctx.strokeStyle = "#333";
	for(var m=0;m<len-1;m++){
		for(var n=0;n<len-1;n++){
			ctx.strokeRect(m*40+20,n*40+20,40,40);  //绘制40的小正方形
		}
	}
	//绘制文字
	var can1 = document.getElementsByClassName('text');
	var ctx1 = can1[0].getContext("2d");

	ctx1.beginPath();
	ctx1.font=("100px Georgia");
	ctx1.fillStyle="#F70707";
	// ctx1.fillText("Hello",40,100);

	//下子
	can.onclick=function play(e){
		// alert(e.clientX);
		//获取棋盘偏移量
		var l = this.offsetLeft+20;
		var t = this.offsetTop+20;
		//获取点击相对棋盘坐标
		var x =e.clientX - l;
		var y = e.clientY -t;
		// alert(x);
		var row,col,index = 0;

		if(x%40 < 20){
			col = parseInt(x/40);
		}else{
			col = parseInt(x/40)+1;
		}
		row = y%40<20 ? parseInt(y/40) : parseInt(y/40)+1;

		$.post(
				"view.do",
				{"x":col,"y":row},
				function(res){
					if(res.info==2){//当服务器返回的数据，是正常的时候，才下棋
						if(blackcolor){
							ctx.drawImage(black,col*40,row*40);//下黑子
						}
						else{
							ctx.drawImage(white,col*40,row*40);//下白子
						}
					}else if(res.info==-2){
						alert("目前不该你下这步棋");
					}else if(res.info==3){
						if(blackcolor){
							ctx.drawImage(black,col*40,row*40);//下黑子
						}
						else{
							ctx.drawImage(white,col*40,row*40);//下白子
						}
						alert(res.infodetail);
					}else {
						alert(res.info);
					}
				},
				"JSON"
			);
		//进行Ajax的提交，把用户下的位置提交到服务器
	}
	setInterval(function(){
	$.get(
			"autoget.do",
			{"a":"b"},
			function(res){
				var x=res.x;
				var y=res.y;
//				var who=res.who;
				var winner=res.winner;
				if(!blackcolor){
					ctx.drawImage(black,parseInt(x)*40,parseInt(y)*40);//下黑子
				}
				else{
					ctx.drawImage(white,parseInt(x)*40,parseInt(y)*40);//下白子
				}
				if(winner!=""){
				
				}
			},
			"JSON"
	)
},3000);
</script>
</body>
</body>
</html>